<template>
  <div>
    <view class="main-content-text" :class="[ item.isUnfold ? '' : 'content-close' ]">{{ item.content }}</view>
		<image v-if="item.content && item.content.length > 54" :src="require(`@/static/image/up.png`)" class="arrows" :class="[ item.isUnfold ? 'unfold' : 'nounfold' ]" @click="arrowsClick(item)"></image>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .arrows{
    position: absolute;
    top: 60rpx;
    right: -32rpx;
    width: 50rpx;
    height: 50rpx;
  }
  .unfold{
    transform: rotate(0deg);
  }
  .nounfold{
    transform: rotate(180deg);
  }
  .content-close{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
</style>

